<template>
  <div>
    <fenheader></fenheader>
    <div class="zhongjian">
      <div class="liebiao">
        <ul>
          <li  @click="doClick()"><a href="###">为你推荐</a></li>
          <li @click="doClick2()"><a href="###">面部护理</a></li>
          <li><a href="###">底妆彩妆</a></li>
          <li><a href="###">休闲零食</a></li>
          <li><a href="###">身体护理</a></li>
          <li><a href="###">美容美发</a></li>
          <li><a href="###">生活用品</a></li>
          <li><a href="###">个人护理</a></li>
          <li><a href="###">保健养生</a></li>
          <li><a href="###">时尚潮品</a></li>
          <li><a href="###">母婴用品</a></li>
        </ul>
      </div>
      <div v-show="isTuijian?true:false" class="tuijian">
        <div class="xinde">
          <img src="../../assets/img/fenlei/xinde.png" alt="">
        </div>
        <div class="guoyou">
          <div class="zhiyou">
            <img src="../../assets/img/fenlei/huaban.jpg" alt="">
            <p>日本直邮</p>
          </div>
          <div class="zhiyou">
            <img src="../../assets/img/fenlei/nvshen.jpg" alt="">
            <p>美国直邮</p>
          </div>
          <div class="zhiyou">
            <img src="../../assets/img/fenlei/china.jpg" alt="">
            <p>中国直邮</p>
          </div>
          <div class="zhiyou">
            <img src="../../assets/img/fenlei/cao.jpg" alt="">
            <p>澳大利亚直邮</p>
          </div>
          <div class="zhiyou">
            <img src="../../assets/img/fenlei/qiao.jpg" alt="">
            <p>英国直邮</p>
          </div>
        </div>

        <div class="shopping">
          <div><span>热卖品类</span></div>
          <div @click="goHuli" class="zhiyou remai">
            <img src="../../assets/img/fenlei/bao.jpg" alt="">
            <p>名牌皮包</p>
          </div>
          <div class="zhiyou remai">
            <img src="../../assets/img/fenlei/bao.jpg" alt="">
            <p>名牌皮包</p>
          </div>
          <div class="zhiyou remai">
            <img src="../../assets/img/fenlei/bao.jpg" alt="">
            <p>名牌皮包</p>
          </div>
          <div class="zhiyou remai">
            <img src="../../assets/img/fenlei/bao.jpg" alt="">
            <p>名牌皮包</p>
          </div>
          <div class="zhiyou remai">
            <img src="../../assets/img/fenlei/bao.jpg" alt="">
            <p>名牌皮包</p>
          </div>
          <div class="zhiyou remai">
            <img src="../../assets/img/fenlei/bao.jpg" alt="">
            <p>名牌皮包</p>
          </div>


        </div>
      </div>
      <div v-show="isHuli?true:false" class="huli">
        <div class="xinde">
          <img src="../../assets/img/fenlei/mianbuhuli.png" alt="">
        </div>
        <div   class="zhiyou remai mianbuhuli">
          <img src="../../assets/img/fenlei/huazhuangpin.jpg" alt="">
          <p>洁面护理</p>
        </div>
        <div class="zhiyou remai mianbuhuli">
          <img src="../../assets/img/fenlei/kouhong.jpg" alt="">
          <p>人气口红</p>
        </div>
        <div class="zhiyou remai mianbuhuli">
          <img src="../../assets/img/fenlei/bao.jpg" alt="">
          <p>洁面护理</p>
        </div>
        <div class="zhiyou remai mianbuhuli">
          <img src="../../assets/img/fenlei/huazhuangpin.jpg" alt="">
          <p>洁面护理</p>
        </div>
        <div class="zhiyou remai mianbuhuli">
          <img src="../../assets/img/fenlei/kouhong.jpg" alt="">
          <p>人气口红</p>
        </div>
        <div class="zhiyou remai mianbuhuli">
          <img src="../../assets/img/fenlei/bao.jpg" alt="">
          <p>洁面护理</p>
        </div>
        <div class="zhiyou remai mianbuhuli">
          <img src="../../assets/img/fenlei/huazhuangpin.jpg" alt="">
          <p>洁面护理</p>
        </div>
        <div class="zhiyou remai mianbuhuli">
          <img src="../../assets/img/fenlei/kouhong.jpg" alt="">
          <p>人气口红</p>
        </div>
        <div class="zhiyou remai mianbuhuli">
          <img src="../../assets/img/fenlei/bao.jpg" alt="">
          <p>洁面护理</p>
        </div>
        <div class="zhiyou remai mianbuhuli">
          <img src="../../assets/img/fenlei/huazhuangpin.jpg" alt="">
          <p>洁面护理</p>
        </div>
        <div class="zhiyou remai mianbuhuli">
          <img src="../../assets/img/fenlei/kouhong.jpg" alt="">
          <p>人气口红</p>
        </div>
        <div class="zhiyou remai mianbuhuli">
          <img src="../../assets/img/fenlei/bao.jpg" alt="">
          <p>洁面护理</p>
        </div>
      </div>
    </div>
    <router-view></router-view>
    <fenfooter></fenfooter>
  </div>
</template>
<script>
  import fenheader from '../HyyHeader/header.vue'
  import fenfooter from '../HyyFooter/footer.vue'
  export default {
    data(){
      return{
        isTuijian:false,
        isHuli:true
      }
    },
    methods:{
      doClick(){
        this.$router.push({path:'/FenLei'})
      },
      doClick2(){
        this.$router.push({path:'/huli'})
      },
      goHuli(){
        this.$router.push({path:'/MianBuHuli'})
      }
    },
    components:{
      fenheader,
      fenfooter
    }

  }
</script>
<style scoped>
  .zhongjian{
    margin-top: 0.5rem;
  }
  .liebiao{
    width: 30%;
    border-right: 1px solid #979997;
    float: left;
    padding-bottom: 3rem;
  }
  ul{
    list-style: none;
  }
  ul li{
    border-bottom: 1px solid silver;
  }
  ul li a{
    font-size: 0.7rem;
    display: block;
    margin: 0.4rem;
    text-align: center;
  }
  a:hover{
    width: 90%;
    color: red;
    border-right: 2px solid red;
  }
  li:hover{

  }
  .tuijian{
    width: 69%;
    float: right;
    /*display: none;*/
  }
  .xinde img{
    width: 90%;
    margin: 5%;
  }
  .guoyou{
    width: 100%;
    /*margin: 0.2rem;*/
    border-bottom: 1px solid gray;
  }
  .zhiyou{
    width: 30%;
    font-size: 0.5rem;
    display: inline-block;
    margin-left: 0.1rem;
    text-align: center;
    margin-bottom: 1rem;
  }
  .zhiyou img{
    width: 50%;
    margin:0.3rem auto;
    display:block  ;

  }
  .shopping{
    width: 100%;
  }
  .shopping span{
    /*width: 100%;*/
    margin: 0.5rem;
    font-size: 0.6rem;
  }
  .remai{
    width: 28%;
  }
  .remai img{
    width: 80%;
    margin:0.2rem auto;
    display:block;
  }
  .huli{
    width: 69%;
    float: right;
    /*display: none;*/
  }
  .mianbuhuli{
    width: 29%;
  }

</style>
